<template>
  <div class="chart-box">
    <Line :loading="loading" :chartData="chartData" title="吨水成本" :unit="unit" />
  </div>
</template>

<script setup lang="ts">
  import { getCOMPREHENSIVESINGLECOST } from '@/api/common/chart'
  import Line from '@/components/Charts/Line/index.vue'
  import { ref, watch } from 'vue'

  defineOptions({ name: 'WaterUnitCost' })

  const props = defineProps({
    dictCode: {
      type: String,
    },
    itemName: {
      type: String,
    },
    searchInfo: {
      type: Object,
      default: () => ({}),
    },
  })
  const unit = ref('')
  const chartData = ref()
  const loading = ref(false)
  const getChartData = (searchInfo) => {
    loading.value = true
    const { dictCode } = props
    getCOMPREHENSIVESINGLECOST({
      ...searchInfo,
      dictCode,
      itemName: '每吨水成本',
    })
      .then((res) => {
        chartData.value = res
        unit.value = res.yaxisList[0]?.unit || ''
      })
      .finally(() => {
        loading.value = false
      })
  }
  watch(
    () => props.searchInfo,
    (newValue) => {
      if (Object.values(newValue).length > 0) {
        getChartData(newValue)
      }
    },
    { immediate: true },
  )
</script>

<style scoped lang="scss">
</style>